import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './Badge.module.css';
import { props } from 'ramda';

export default function Badge({ className, max, count, children }) {
	const cnt = count > max ? `${max}+` : count;

	if (React.isValidElement(children)) {
		return React.cloneElement(children, {
			...props,
			'data-count': cnt,
			className: cn(children?.props?.className, s.badge, {
				[s.hidden]: !cnt,
			}),
		});
	}

	return (
		<span
			className={cn(s.badge, {
				[s.hidden]: !cnt,
			})}
		>
			{cnt}
			{children}
		</span>
	);
}

Badge.propTypes = {
	className: PropTypes.string,
	max: PropTypes.number,
	count: PropTypes.number.isRequired,
	children: PropTypes.node.isRequired,
};

Badge.defaultProps = {
	className: s.badge,
	max: 99,
	count: 0,
};
